<template>
    <div style="height:100%">
        <Layout>
            <LayoutPanel region="center" class="LayoutPanelRight2">
                <div class="content">
                    <!-- 表格以外的高度，计算时减去tools的实际高度 -->
                    <div id="tools">
                        <!-- 功能按钮组 -->
                        <div class="buttonbg">
                            <a class="bd_bgi">
                                <span class="export"></span>
                                <span class="text" @click="exportLeave">导出</span>
                            </a>
                            <div class="page-title">实时考勤管理系统 > 反馈记录查询</div>
                        </div>
                        <!-- 查询条件组 -->
                        <div class="conditions">
                            <!--<div class="marginBottom8 ">-->
                                <!--<Label>时间类型</Label>-->
                                <!--<ComboBox-->
                                        <!--class="unifiedWid"-->
                                        <!--inputId="c3"-->
                                        <!--v-model="dateType"-->
                                        <!--:data="dateTypeData"-->
                                        <!--:panelStyle="comboBoxBorder"-->
                                <!--&gt;</ComboBox>-->
                            <!--</div>-->
                            <div class="marginBottom8">
                                <Label>开始日期</Label>
                                <DateBox
                                        inputId="startDate"
                                        v-model="startDate"
                                        format="yyyy-MM-dd"
                                        :editable="false"
                                ></DateBox>
                            </div>
                            <div class="marginBottom8">
                                <Label>结束日期</Label>
                                <DateBox
                                        inputId="endDate"
                                        v-model="endDate"
                                        format="yyyy-MM-dd"
                                        :editable="false"
                                ></DateBox>
                            </div>

                            <div class="marginBottom8">
                                <Label></Label>
                                <SearchBox
                                        style="width:200px;"
                                        placeholder="请输入工号/姓名"
                                        v-model="serchValueR"
                                        @search="seraching"
                                >
                                    <Addon>
                                        <span
                                                v-if="serchValueR"
                                                class="textbox-icon icon-clear"
                                                @click="serchValueR = null"
                                        ></span>
                                    </Addon>
                                </SearchBox>
                            </div>

                            <div class="marginBottom8">
                                <LinkButton
                                        class="startSerch"
                                        style="margin-top: 3px;"
                                        @click="seraching"
                                >开始查询
                                </LinkButton>
                            </div>
                        </div>
                    </div>
                    <!-- 表格容器   -->
                    <div id="tableContent">
                        <!--AgGridVue-->
                        <ag-grid-vue
                                id="myGrid"
                                style="width: 100%; height: 100%;text-align: center;"
                                class="ag-theme-balham"
                                :gridOptions="gridOptions"
                                :columnDefs="mainColumnDefs"
                                rowSelection="multiple"
                                :rowDeselection="true"
                                @rowClicked="rowClickedd"
                                @grid-ready="onGridReady"
                                :rowData="rowDataA"
                                :defaultColDef="defaultColDef"
                                :paginationPageSize="paginationPageSize"
                                :localeText="localeText"
                                :suppressMenu="true"
                        ></ag-grid-vue>
                        <Panel class="footerpage">
                            <template slot="footer">
                                <Pagination
                                        :total="pageInfo.pageTotal"
                                        :pageSize="pageInfo.pageSize"
                                        :pageNumber="pageInfo.pageNumber"
                                        :layout="pageInfo.layout"
                                        @pageChange="onPageChange($event)"
                                ></Pagination>
                            </template>
                        </Panel>

                    </div>
                </div>
            </LayoutPanel>
        </Layout>

        <!--查看图片-->
        <Dialog
                ref="lookImg"
                dialogCls="mydlgg changeBgc"
                headerCls="mydlgg-head"
                footerCls="mydlgg-foot"
                :dialogStyle="{ width: '500px',top:'20px !important' }"
                :modal="true"
                borderType="thin"
        >
            <div slot="header">
                <span class="headerIcon newlyAdded"></span>
                <span class="titleStyle">查看图片</span>
            </div>
            <div class="insidePadding" :style="insideChangeStyle">
                <img :src="lookImageSrc" alt="img" style="width: 350px;">
            </div>
        </Dialog>

    </div>
</template>

<script>
    import sys from "@/api/sys";
    import cfg from "@/config/config";
    import { tableBoxHeight } from "@/api/communal";
    import mapSetApi from "@/api/mapSet";
    import { AgGridVue } from "ag-grid-vue";
    import language_ag from "@/config/localization_ag";
    import dateUtil from "@/utils/dateUtils";
    import moment from "moment";

    export default {
        components: {
            AgGridVue,
        },
        name: "",
        data() {
            return {
                serchValueR:"",
                insideChangeStyle:{
                    textAlign: "center",
                    maxHeight: "550px"
                },
                //comboBox边框与高度
                comboBoxBorder: { border: "#bbbbbb 1px solid", height: "70px" },
                dataUrl: "api/stDevice/getBdKqFeedbackList",
                // 表格参数
                gridOptions: null,
                mainColumnDefs: null, //表格表头
                selectedRow:null,  //点击行/选中行数据
                selectedRowDataUp: {}, //表格点击行内按钮获取的行数据
                rowDataA:[],  //表格数据
                defaultColDef: null,
                localeText: language_ag,
                paginationPageSize: null, //每页显示多少行
                lookImageSrc:"",
                //主表格分页
                pageInfo: {
                    layout: [
                        "list",
                        "sep",
                        "first",
                        "prev",
                        "links",
                        "next",
                        "last",
                        "sep",
                        "refresh",
                        "info",
                    ],
                    pageTotal: 0,
                    pageSize: 50,
                    pageNumber: 1
                },
                //查询条件
                dateType: 1,
                dateTypeData: [
                    { value: 1, text: "按请假时间" },
                    { value: 2, text: "按申请时间" }
                ],
                startDate: new Date(),
                endDate: new Date(),
                autoUpload: false,
                uploadUrl: cfg.apiUrl + "bdLeaveOrder/importLeaves",
                uploadDisabled: false,
                accept: [
                    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                    "application/vnd.ms-excel"
                ],
                fileName: "",
                //导入录入失败人员提示框
                importErr: {
                    xqRowData: [],
                    xqColumnDefs: [
                        { headerName: "工号", field: "userNo", width: 100 },
                        { headerName: "姓名", field: "userName", width: 100 },
                        { headerName: "部门", field: "deptName", width: 150 },
                        { headerName: "科室", field: "officesName", width: 150 },
                        { headerName: "所属", field: "byCompany", width: 150 },
                        { headerName: "假类", field: "leaveName", width: 150 },
                        { headerName: "开始日期", field: "beginDate", width: 100 },
                        { headerName: "结束日期", field: "endDate", width: 100 },
                        { headerName: "开始时间", field: "beginTime", width: 100 },
                        { headerName: "结束时间", field: "endTime", width: 100 },
                        { headerName: "请假时长", field: "leaveHours", width: 100 },
                        { headerName: "错误信息", field: "errorMsg", width: 350 }
                    ]
                }
            };
        },
        beforeMount() {
            // 表格配置
            this.gridOptions = {
                pagination: false //分页
            };
            this.mainColumnDefs = [
                {
                    headerName: "工号",
                    field: "userNo",
                    width: 100,
                    minWidth: 100,
                },
                {
                    headerName: "姓名",
                    field: "userName",
                    width: 100,
                    minWidth: 100,
                },
                {
                    headerName: "手机品牌",
                    field: "phoneBrands",
                    width: 160,
                    minWidth: 160,
                },
                {
                    headerName: "操作系统类型",
                    field: "phonesSystem",
                    width: 160,
                    minWidth: 160,
                },
                {
                    headerName: "通讯服务商",
                    field: "phoneOperators",
                    width: 160,
                    minWidth: 160,
                },
                {
                    headerName: "当前位置",
                    field: "nowLocation",
                    width: 200,
                    minWidth: 160,
                },
                {
                    headerName: "经度",
                    field: "longitude",
                    width: 160,
                    minWidth: 160,
                },
                {
                    headerName: "纬度",
                    field: "latitude",
                    width: 160,
                    minWidth: 160,
                },
                {
                    headerName: "备注",
                    field: "remarks",
                    width: 200,
                    minWidth: 160,
                },
                {
                    headerName: "创建时间",
                    field: "creationTime",
                    width: 160,
                    minWidth: 160,
                },
                {
                  headerName: "操作",
                  field: "menu",
                  width: 100,
                  minWidth: 80,
                  cellRenderer: this.cellBtn
                },

            ];
            this.defaultColDef = {
                //单元格样式
                cellStyle: { "border-right": "1px solid #d9dcde" }
            };

        },
        mounted() {
            tableBoxHeight();
            this.$refs.lookImg.close();
            this.startDate = dateUtil.getFirstDay();
            this.endDate = dateUtil.getLastDay();

            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
            console.log(screenHeight);
            this.insideChangeStyle.maxHeight = screenHeight < 768 ? "550px":"750px";
        },
        methods: {
            onGridReady(params) {
                this.gridApi = params.api;
                this.columnApi = params.columnApi;
                // 调整表格列宽大小自适应
                // this.gridApi.sizeColumnsToFit();
            },
            // 上面主表格点击行事件
            rowClickedd(params) {
                console.log(params.data);
                this.selectedRow = params.data;
                //this.selectedRowDataUp = params.data;
            },
            // 上面表格-补出勤按钮
            cellBtn(params) {
                let _this = this;
                _this.selectedRowDataUp = {};
                var eDiv = document.createElement("div");
                eDiv.innerHTML =  '<span class="my-css-class"><a class="inTableBtn2">查看图片</a></span> ';
                var eButton = eDiv.querySelectorAll(".inTableBtn2")[0];
                eButton.addEventListener("click", function() {
                    _this.selectedRowDataUp = params.data;
                    _this.lookImage();
                });
                return eDiv;
            },
            // 查看图片
            lookImage(){
                console.log(this.selectedRowDataUp);
                let url = "data:image/jpg;base64,";
                this.lookImageSrc = url + this.selectedRowDataUp.photo1;
                this.$refs.lookImg.open();

            },

            /*导出*/
            async exportLeave() {
                let param = {
                    startDate:
                        this.startDate == ""
                            ? this.startDate
                            : moment(this.startDate).format("YYYY-MM-DD"),
                    endDate:
                        this.endDate == ""
                            ? this.endDate
                            : moment(this.endDate).format("YYYY-MM-DD"),
                    serchTxt: this.serchValueR,
                };
                // param.pageNumber = 1;
                // param.pageSize = 50;

                this.$loading("导出中...");

                // const response = await sys.getData(
                //     "api/stDevice/exportExcel",
                //     "get",
                //     param
                // );
                let jsonIn = encodeURI(encodeURI(JSON.stringify(param)));
                window.open(cfg.apiUrl + 'api/stDevice/exportExcel?jsonIn=' + jsonIn, "_self");
                setTimeout(()=>{
                    this.$loading.close();
                },1000)


                // if (response.success) {
                //     let jsonIn = encodeURI(encodeURI(response.message));
                //     window.open(
                //         cfg.apiUrl + "filedownload/downLoad3?fileFullName=" + jsonIn,
                //         "_blank"
                //     );
                // } else {
                //     alert(response.message);
                // }
            },

            // 查询，搜索
            seraching() {
                this.grtBdKqTimecard();
            },
            // 切换分页
            onPageChange(event) {
                this.pageInfo.pageNumber = event.pageNumber;
                this.pageInfo.pageSize = event.pageSize;
                this.grtBdKqTimecard();
            },
            // 获取主表格数据
            async grtBdKqTimecard() {
                this.$loading("正在加载中...");
                let param = {
                    startDate:
                        this.startDate == ""
                            ? this.startDate
                            : moment(this.startDate).format("YYYY-MM-DD"),
                    endDate:
                        this.endDate == ""
                            ? this.endDate
                            : moment(this.endDate).format("YYYY-MM-DD"),
                    serchTxt: this.serchValueR,
                    pageNumber: this.pageInfo.pageNumber,
                    pageSize: this.pageInfo.pageSize,
                };
                mapSetApi.findBdKqTimecard(param).then(res => {
                    console.log(res.result)
                    if (res.success) {
                        this.rowDataA = res.result.records;
                        this.pageInfo.pageNumber = res.result.current;
                        this.pageInfo.pageSize = res.result.size;
                        this.pageInfo.pageTotal = res.result.total;
                    } else {
                        this.$messager.alert({
                            title: "提示框",
                            icon: "error",
                            msg: res.message
                        });
                    }
                    this.$loading.close();
                });
            },


        }
    };
</script>

<style>

</style>
